<template style="background-color: #d4e1f1">
    <div  style="background: #D4E1F1;">
        <div style="color: rebeccapurple;margin-right: 900px;height: 10px"></div>
        <div style="color: rebeccapurple;margin-right: 80%" >
            <!--    查询-->
            <el-button    type="success"   @click="dialogVisible =true" ><font color="black" style="">添加</font></el-button>
            <el-button    type="danger"   @click="deleteFileOrDirectory(sels)"  > <font color="black" style="">删除</font></el-button>
        </div>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <!--      模糊-->
                <el-form-item style="margin-left: 10px">

                    房号 <el-select   v-model="search"
                                    @focus="function1"
                                    size="mini"

                                    @change="function2(formInline4.fhao)" style="width: 200px">
                    <el-option  v-for="item in formInline4"
                                :key="item.fhao"
                                :value="item.fhao"
                                :label="item.fhao"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-input
                            v-model="search2"
                            class="search_name"
                            size="mini"
                            placeholder="业主">
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-left: 30px">
                    <el-date-picker
                            v-model="search3"
                            align="right"
                            size="mini"
                            type="date"
                            class="search_name"
                            placeholder="选择日期"

                            :picker-options="pickerOptions">
                    </el-date-picker>

                    <!--          <el-input-->
                    <!--            v-model="search3"-->
                    <!--            class="search_name"-->
                    <!--            size="mini"-->
                    <!--            placeholder="装修公司">-->
                    <!--          </el-input>-->
                </el-form-item>
                <el-form-item>
                    <el-button
                            round
                            type="text"
                            @click="onSearch()"
                            style="background: #FEFEFE; width: 100px;height: 40px"
                    ><icon class="el-icon-search"/> 查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="el-icon-refresh"
                            type="text"
                            @click="refreshData">刷新
                    </el-button>
                </el-form-item>
                <!--      增加-->

            </el-form>

            <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"   @selection-change="selsChange">

                <el-table-column
                        type="selection"
                        width="55" >
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                style="width: 60px;"
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="ddate"/>
                <el-table-column label="业主名称" prop="name"/>
                <el-table-column label="所属楼吨" prop="ldun"/>
                <el-table-column label="所属楼层" prop="lchen"/>
                <el-table-column label="房号" prop="fhao"/>
                <el-table-column label="用量(吨)" prop="yl"/>
                <el-table-column label="单价" prop="dj"/>
                <el-table-column label="合计" prop="hj"/>
                <el-table-column label="备注" prop="bj"/>
                <!--        <el-table-column label="出入证工本费" prop="crjgb"/>-->
                <!--        <el-table-column label="东或备案证" prop="dhbaz"/>-->
                <!--        <el-table-column label="维修保证金" prop="wx"/>-->
                <!--        <el-table-column label="垃圾清运费" prop="lj"/>-->
                <!--        <el-table-column label="装修工本费" prop="zx"/>-->
                <!--        <el-table-column label="泄水费" prop="xs"/>-->

            </el-table>

            <!--添加页面-->

            <el-dialog
                    title="商铺装修费用管理"
                    :visible.sync="dialogVisible"
                    append-to-body
                    :before-close="handleClose">

                <el-form   :model="ruleForm1" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
                    <!--        <el-form-item label="客户订单编号" prop="id">-->
                    <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                    <!--        </el-form-item>-->
                    <!--      </el-form-item>-->
                    <el-form-item label="业主名称" prop="name">
                        <el-select   v-model="ssld.name"
                                     @focus="function1"
                                     @change="function6"
                                     style="width: 150px" >
                            <el-option  v-for="item in ssld"
                                        :key="item.yid"
                                        :value="item.yid"
                                        :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="日期" prop="ddate">
                        <span class="demonstration"></span>
                        <el-date-picker
                                v-model="ruleForm.ddate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属楼吨" prop="ldun">
                        <el-select   v-model="ssldun.ldun"
                                     @focus="function4"
                                     @change="function7"
                                     style="width: 150px">
                            <el-option  v-for="item in ssldun"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.ldun"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="lchen">
                        <el-select   v-model="sslochen.lchen"
                                     @focus="function5"
                                     @change="function3(sslochen.lchen)" style="width: 150px" >
                            <el-option  v-for="item in sslochen"
                                        :key="item.fid"
                                        :value="item.fid"
                                        :label="item.lchen"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--                    <el-form-item label="业主名称" prop="name">-->
                    <!--                        <el-select   v-model="formInline.name"-->
                    <!--                                     @focus="function1"-->
                    <!--                                     @change="function2(formInline.name)" style="width: 300px">-->
                    <!--                            <el-option  v-for="item in formInline"-->
                    <!--                                        :key="item.yid"-->
                    <!--                                        :value="item.yid"-->
                    <!--                                        :label="item.name"></el-option>-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="房号" prop="fhao">
                        <el-select   v-model="fh.fhao"
                                     @change="function8"
                                     style="width: 150px">
                            <el-option  v-for="item in fh"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.fhao"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用量" prop="yl">
                        <el-input v-model="search4"    name="y1" style="width: 150px" ></el-input>
                    </el-form-item>
                    <el-form-item label="单价" prop="dj">
                        <el-input v-model="ruleForm1.dj"  name="d1" style="width: 150px" placeholder='0.65'  :disabled="true" label="0.65"></el-input>
                    </el-form-item>
                    <el-form-item label="合计" prop="hj">
                        <el-input v-model="ruleForm1.hj" name="h1" style="width: 150px" :disabled="true"></el-input>
                    </el-form-item>

                    <br>
                    <el-form-item label="备注" prop="bj">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="ruleForm1.bj"
                                style="width: 410px"    >
                        </el-input>
                    </el-form-item><br>

                </el-form>
                <el-button round @click="cancel()" style="width: 150px;margin-left: 20px"   ><el-image src="" style="width: 20px"></el-image> 取 消</el-button>
                <el-button round @click="addUser()" type="primary" style="width: 150px"> <el-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1954671725,2900034259&fm=26&gp=0.jpg" style="width: 20px"></el-image>确定</el-button>

                <span slot="footer" class="dialog-footer">

            <span slot="footer" class="dialog-footer">

            </span>
    </span>
            </el-dialog>

            <!--修改页面-->
            <!--        <el-form-item label="客户订单编号" prop="id">-->
            <el-dialog
                    title="编辑"
                    :append-to-body='true'
                    :visible.sync="dialogUpdate"

            >
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
                    <el-form-item label="业主名称" prop="name">
                        <el-select   v-model="ruleForm.name"
                                     @focus="function1"
                                     @change="function6(ruleForm.name)"
                                     style="width: 150px"  value="ruleForm.name" >
                            <el-option  v-for="item in ssld"
                                        :key="item.yid"
                                        :value="item.yid"
                                        :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="日期" prop="ddate">
                        <span class="demonstration"></span>
                        <el-date-picker
                                v-model="ruleForm.ddate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属楼吨" prop="ldun">
                        <el-select   v-model="ruleForm.ldun"
                                     @focus="function4"
                                     @change="function7(ruleForm.ldun)"
                                     style="width: 150px" value="ruleForm.ldun">
                            <el-option  v-for="item in ssldun"
                                        :key="item.id"
                                        :value="item.lcid"
                                        :label="item.ldun"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="lchen">
                        <el-select   v-model="ruleForm.lchen"
                                     @focus="function5"
                                     @change="function3(ruleForm.lchen)" style="width: 150px" value="ruleForm.lchen">
                            <el-option  v-for="item in sslochen"
                                        :key="item.fid"
                                        :value="item.fid"
                                        :label="item.lchen"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--                    <el-form-item label="业主名称" prop="name">-->
                    <!--                        <el-select   v-model="formInline.name"-->
                    <!--                                     @focus="function1"-->
                    <!--                                     @change="function2(formInline.name)" style="width: 300px">-->
                    <!--                            <el-option  v-for="item in formInline"-->
                    <!--                                        :key="item.yid"-->
                    <!--                                        :value="item.yid"-->
                    <!--                                        :label="item.name"></el-option>-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="房号" prop="fhao">
                        <el-select   v-model="ruleForm.fhao"
                                     @change="function8(ruleForm.fhao)"
                                     style="width: 150px" value="ruleForm.fhao" property="ruleForm.fhao">
                            <el-option  v-for="item in fh"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.fhao"></el-option>
                        </el-select>
                    </el-form-item>

                    <!--                    <el-form-item label="业主名称" prop="name">-->
                    <!--                        <el-select   v-model="formInline.name"-->
                    <!--                                     @focus="function1"-->
                    <!--                                     @change="function2(formInline.name)" style="width: 300px">-->
                    <!--                            <el-option  v-for="item in formInline"-->
                    <!--                                        :key="item.yid"-->
                    <!--                                        :value="item.yid"-->
                    <!--                                        :label="item.name"></el-option>-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->

                    <el-form-item label="用量" prop="yl">
                        <el-input v-model="ruleForm.yl"  @keyup.native="jisun1"  name="y1" style="width: 150px" ></el-input>
                    </el-form-item>
                    <el-form-item label="单价" prop="dj">
                        <el-input v-model="ruleForm.dj" value="0.65" name="d1" style="width: 150px" placeholder='0.65'  :disabled="true" label="0.65"></el-input>
                    </el-form-item>
                    <el-form-item label="合计" prop="hj">
                        <el-input v-model="ruleForm.hj" name="h1" style="width: 150px" :disabled="true"></el-input>
                    </el-form-item>

                    <br>
                    <el-form-item label="备注" prop="bj">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="ruleForm.bj"
                                style="width: 410px"    >
                        </el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer" style="margin-right: 100px">

                           <span slot="footer" class="dialog-footer">
              <el-button @click="cancel()" style="width: 300px"   >取 消</el-button>
              <el-button @click="updateUser()" type="primary" style="width: 300px">确定</el-button>
            </span>
            </span>
            </el-dialog>

            <br>
            <div class="pages" style="align-content: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[3, 6, 9, 12]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="margin-right: 800px;width: 100px">
                </el-pagination>

            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'ysList',
        inject: ['reload'],
        data () {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            picker.$emit('pick', new Date())
                        }
                    }, {
                        text: '昨天',
                        onClick (picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', date)
                        }
                    }, {
                        text: '一周前',
                        onClick (picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', date)
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                uuu: [],
                textarea: '',
                ssldun: [],
                sels: [],
                ssld: [],
                sslochen: [],
                users: [

                ],
                fh: [],
                depatment: '',
                depss: [],
                search: '',
                search2: '',
                search3: '',
                search4: '',
                search5: '',
                dialogVisible: false,
                dialogUpdate: false,
                dialogUpdate1: false,
                schArr: [], // 分页数据源
                pagesize: 3,
                currentPage: 1,
                total: 0,

                disablePage: false,
                ruleForm: {
                    schArr: [],
                    tableData: [],
                    search: '',
                    dialogVisible: false,
                    dialogUpdate: false,
                    dialogUpdate1: false,
                    pageSize: 3,
                    currentPage: 1,
                    total: 0,
                    disablePage: false
                },
                ruleForm1: {
                    dj: 5
                },
                pages: {

                    sid: '',
                    sgry: '',
                    crzyj: '',
                    crjgb: '',
                    dhbaz: '',
                    zxgs: '',
                    lc: '',
                    wx: '',
                    lj: '',
                    zx: '',
                    xs: '',
                    yid: '',
                    name: '',
                    ylc: '',
                    fh: '',
                    ld: ''
                },
                formInline1: {
                    id: '',
                    fangid: '',
                    fhao: '',
                    fid: ''
                },
                formInline4: {
                    id: '',
                    fangid: '',
                    fhao: '',
                    fid: ''
                },
                formInline2: {
                    id: '',
                    lchen: '',
                    lcid: '',
                    fid: ''
                },
                formInline3: {
                    id: '',
                    ldun: '',
                    lcid: ''
                },
                formInline: {
                    id: '',
                    sgry: '',
                    crzyj: '',
                    crjgb: '',
                    dhbaz: '',
                    zxgs: '',
                    lc: '',
                    wx: '',
                    lj: '',
                    zx: '',
                    xs: '',
                    yid: '',
                    name: '',
                    ylc: '',
                    fh: '',
                    ld: '',
                    fhao: ''

                }
            }
        },
        created () {
            const that = this
            this.getPages()
            this.$axios.post('/selectSfgl')
                .then(function (response) {
                    console.log(response)
                    that.users = response.data.log
                })

            // this.$axios.post('/selectLoudun')
            //     .then(function (response) {
            //         console.log(response);
            //         that.formInline3 = response.data;
            //     })
            // this.$axios.post('/selectLouc')
            //     .then(function (response) {
            //         console.log(response);
            //         that.formInline2 = response.data;
            //     })
            this.$axios.post('/selectFang11')
                .then(function (response) {
                    console.log(response)
                    that.formInline4 = response.data
                })
        },
        watch: {
            // watch就是用来监控数据变化，只有变化了才会调用定时器的变化
            search () {
                // 调用定时器

                this.timer()
            },
            search4 () {
                this.timer()
                this.jisun()
            },
            search5 () {
                this.timer()
                this.jisun1()
            },
            search2 () {
                // 调用定时器

                this.timer()
            },
            search3 () {
                // 调用定时器

                this.timer()
            }
        },
        // 页面销毁后 停止计时器
        destroyed () {
            clearTimeout(this.timer)
        },
        mounted () {
            this.getDep()
        },
        function2 (val) {
            console.log(val) // 此时打印的直接就是id
        },

        methods: {

            jisun: function () {
                let that = this
                // eslint-disable-next-line eqeqeq
                that.ruleForm1.hj = (that.search4 * that.ruleForm1.dj)
                let s = that.ruleForm1.hj.toFixed(2)
                that.ruleForm1.hj = s
            },
            jisun1: function () {
                let that = this
                // eslint-disable-next-line eqeqeq
                that.ruleForm.hj = (that.ruleForm.yl * that.ruleForm1.dj)
                let s = that.ruleForm.hj.toFixed(2)
                that.ruleForm.hj = s
            },
            function2 (val) {
                console.log(val) // 此时打印的直接就是id
            },
            function1 () {
                const that = this
                this.$axios.post('/selectYz1')
                    .then(function (response) {
                        that.ssld = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.ssld)
                    })
            },
            function4 () {
                const that = this
                this.$axios.post('/selectLoudun1')
                    .then(function (response) {
                        that.ssldun = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.ssldun)
                    })
            },
            function5 () {
                const that = this
                this.$axios.post('/selectLouc1')
                    .then(function (response) {
                        that.sslochen = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.sslochen)
                    })
            },
            function3 (val) {
                const that = this
                this.$axios.post('/selectFang111?fid=' + val)
                    .then(function (response) {
                        that.fh = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.fh)
                    })
                this.ruleForm.fid = val
                this.ruleForm.fhao = ''
            },
            getData (ruleForm1) {
                ruleForm1.dj = 0.65
            },
            function6 (name) {
                this.ruleForm.yid = name
            },
            function7 (ldun) {
                this.ruleForm.lcid = ldun
            },
            function8 (fhao) {
                this.ruleForm.id = fhao
            },
            handleSizeChange (val) {
                this.getPageData()
                var s = this
                console.log(`每页 ${val} 条`)
                s.pagesize = val
                s.getPageData()
                console.log(s.pagesize)
            },
            handleCurrentChange (val) {
                this.getPageData()
                var ss = this
                console.log(`当前页: ${val}`)
                ss.currentPage = val
                ss.getPageData()
                console.log(ss.currentPage)
            },
            getPageData () {
                console.log('是否yes')
                var thats = this
                let start = (this.currentPage - 1) * this.pagesize
                let end = start + this.pagesize
                this.schArr = thats.users.slice(start, end)
                this.total = thats.users.length
            },

            selsChange (sels) {
                this.sels = sels
            },
            deleteFileOrDirectory () {
                var ids = this.sels.map(item => item.did).join()// 获取所有选中行的id组成的字符串，以逗号分隔
                this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'

                }).then(() => {
                        this.$axios.post('deleteSfgl?ids=' + ids)
                        this.reload()
                        console.log('删除成功')
                    }
                )
            },

            handleEdit (index, row) {
                this.dialogUpdate = true
                this.ruleForm = Object.assign({}, row) // 这句是关键！！！
            },
            handleEdit1 (index, row) {
                this.dialogUpdate = true
                this.ruleForm = Object.assign({}, row) // 这句是关键！！！
            },

            // handleClose(done) {
            //     this.$confirm('确认关闭？')
            //         .then(  => {
            //             done();
            //         })
            //         .catch(_ => {});
            // },

            cancel () {
                this.dialogUpdate = false
                this.dialogVisible = false
                this.emptyUserData()
            },
            emptyUserData () {
                this.ruleForm = {

                    id: this.ruleForm.id,
                    sgry: this.ruleForm.sgry,
                    crzyj: this.ruleForm.crzyj,
                    crjgb: this.ruleForm.crjgb,
                    dhbaz: this.ruleForm.dhbaz,
                    zxgs: this.ruleForm.zxgs,
                    lc: this.ruleForm.lc,
                    wx: this.ruleForm.wx,
                    lj: this.ruleForm.lj,
                    zx: this.ruleForm.zx,
                    xs: this.ruleForm.xs,
                    ylc: this.ruleForm.ylc,

                    yid: this.ruleForm.yid,
                    name: this.ruleForm.name,
                    fh: this.ruleForm.fh,
                    ld: this.ruleForm.ld
                }
            },
            addUser () {
                let w = this.moment(this.ruleForm.ddate).format('YYYY-MM-DD')

                let postData = this.qs.stringify({
                    ddate: w,
                    yl: this.search4,
                    dj: this.ruleForm1.dj,
                    hj: this.ruleForm1.hj,
                    bj: this.ruleForm1.bj,

                    lcid: this.sslochen.lchen,

                    fid: this.fh.fhao,
                    yid: this.ssld.name,
                    ldid: this.ssldun.ldun
                })
                this.$axios({
                    method: 'post',
                    url: '/addSfgl',

                    data: postData
                }).then(response => {
                    this.$axios.post('').then(response => {
                        this.tableData = response.data
                        this.currentPage = 1
                        this.reload()
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        })
                    }).catch(error => {
                        console.log(error)
                        this.reload()
                    })
                    this.getPages()
                    this.dialogVisible = false
                    console.log(response)
                }).catch(error => {
                    console.log(error)
                    this.reload()
                })
            },
            updateUser () {
                let w = this.moment(this.ruleForm.ddate).format('YYYY-MM-DD')

                let postData = this.qs.stringify({

                    ddate: w,
                    did: this.ruleForm.did,
                    yl: this.ruleForm.yl,
                    dj: this.ruleForm1.dj,
                    hj: this.ruleForm.hj,
                    bj: this.ruleForm.bj,

                    lcid: this.ruleForm.fid,

                    fid: this.ruleForm.id,
                    yid: this.ruleForm.yid,
                    ldid: this.ruleForm.lcid
                })
                this.$axios({
                    method: 'post',
                    url: '/updateSfgl',
                    data: postData
                }).then(response => {
                    this.handleCurrentChange()
                    this.cancel()
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    })
                    console.log(response)
                    this.reload()
                }).catch(error => {
                    this.$message({
                        type: 'success',
                        message: '更新失败!'
                    })
                    console.log(error)
                    this.reload()
                })
            },
            onSearch () {
                let w = this.moment(this.search3).format('YYYY-MM-DD')
                let postData = this.qs.stringify({
                    fhao: this.search,
                    name: this.search2,
                    ddate: w
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8001/getByNameDSfgl',
                    data: postData
                }).then(response => {
                    this.$axios({
                        method: 'post',
                        url: 'http://localhost:8001/rowsSfgl',
                        data: postData
                    }).then(response => {
                        this.total = response.data
                    })
                    this.users = response.data
                    this.disablePage = true
                }).catch(error => {
                    console.log(error)
                })
            },
            getPages () {
                let postData = this.qs.stringify({
                    anum: this.search,
                    astime: this.search2,
                    artime: this.search3
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8001/rowsSfgl',
                    data: postData
                }).then(response => {
                    this.total = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            refreshData () {
                this.reload()
            },
            timer () {
                return setTimeout(() => {
                    this.onSearch()
                }, 100)
            }
        }
    }
</script>
<style scoped>
    .search_name{
        width: 200px;
    }

    .pages{
        margin: 0px;
        padding: 0px;
        text-align: right;
    }
</style>
